$(function(){
    // onloading();
    start();
    getNodeAndLine();
})
// function onloading(){
//     $("<div class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
//     $("<div class=\"datagrid-mask-msg\"></div>").html("执行中，请稍候。。。").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
// }
// function removeload(){
//     $(".datagrid-mask").remove();
//     $(".datagrid-mask-msg").remove();
// }

var opts = {
    lines: 9,
    length: 0,
    width: 15,
    radius: 20,
    corners: 1,
    rotate: 0,
    direction: 1,
    color: '#000',
    speed: 1,
    trail: 34,
    shadow: false,
    hwaccel: false,
    className: 'spinner',
    zIndex: 2e9,
    top: '50%',
    left: '50%'
};
function start(){
    var target = document.getElementById('loadingDiv');
    var spinner = new Spinner(opts).spin(target);
}
function close(){
    var target = document.getElementById('loadingDiv');
    var spinner = new Spinner(opts).spin(target);
    spinner.spin();
}
function getNodeAndLine(){
    $.ajax({
        type: "GET",
        url: "/multipower/relationship/getAtlas",
        dataType: "json",
        async:false,
        success: function(data){
           close();
            var mychart=echarts.init(document.getElementById("knowChart"));
            console.log(data.node);
            console.log(data.edge);
            var node=data.node;
            var edge=data.edge;
            var nodeLength=data.node.length;
            var edgeLength=data.edge.length;
            console.log(nodeLength);
            console.log(edgeLength);
            var nodeObject={   //节点对象
                "name":"设备",
                desc:"8",
                "value":[200,80],
                symbolSize:[60,80],
                selected:true,
                // symbol:'image://http://134.175.123.16:8088/b852723e-b20b-41ef-96a4-a572b248c4c4.png',
                // symbol:'none'
                symbol:'circle',
                itemStyle: {
                    color: '#fff'
                }
            };
            line_direction_option.series[0].data=node.map(function(item,index){
                return {
                    name:item.deviceName,
                    desc:item.deviceId.toString(),
                    value:item.coordinate,
                    symbol:(item.picPath==null)?'circle':"image://"+item.picPath,
                    symbolSize:[60,60],
                    selected:true,
                    itemStyle: {
                        color: '#fff'
                    }
                }
            })
            line_direction_option.series[1].data=edge.map(function(item){
                return {
                    name:"传递",
                    coords:item.line,
                    desc:item.desc,
                    effect: {
                        show: false,
                        trailLength: 0,
                        symbolSize: [30,30],
                        symbol:'none'
                        // symbol:'none'
                        // symbol:'image://img/sun.png'
                    },
                }
            })
            $.ajax({
                type: "GET",
                url: "/multipower/gen",
                dataType: "json",
                async:false,
                success: function(data){
                    var path2='image://img2/littlesun.png';
                    var rc=data.rc;
                    var nodeHigh=[]; //保存高亮节点数组
                    var edgeHigh=[];//保存高亮边数组
                    var nodeHigh1=data.node;
                    var edgeHigh1=data.path;
                    //遍历节点对象，将对象转为数组。
                    for(var index1=0;index1<nodeHigh1.length;index1++){
                        nodeHigh.push(nodeHigh1[index1]);
                    }
                    //遍历边对象，将对象转为数组。
                    for(var index2=0;index2<edgeHigh1.length;index2++){
                        edgeHigh.push(edgeHigh1[index2]);
                    }
                    console.log("data="+nodeHigh);
                    console.log("data="+edgeHigh);
                    console.log(typeof nodeHigh);
                    console.log(typeof edgeHigh);
                    console.log(data.rc);
                    console.log(typeof data.rc);
                    if(rc=="0"){
                        for(var i=0;i<nodeLength;i++){   //节点高亮
                            for(var j=0;j<nodeHigh.length;j++){
                                console.log(node[i].deviceId);
                                if(nodeHigh[j]==node[i].deviceId){
                                    //如果id相同则通过id查询高亮图片，高亮。
                                    $.ajax({
                                        type: "GET",
                                        url: "/multipower/device/getHighlightPic/"+node[i].deviceId,
                                        dataType: "json",
                                        async:false,
                                        success: function(data) {
                                            line_direction_option.series[0].data[i].symbol="image://"+data.highlight;
                                        }
                                    })
                                }
                            }
                        }
                        for(var i=0;i<edgeLength;i++){ //边高亮
                            for(var j=0;j<edgeHigh.length;j++){
                                console.log(node[i].deviceId);
                                if(edgeHigh[j]==edge[i].desc){  //如果关系名称相同则边高亮。
                                    line_direction_option.series[1].data[i].effect.symbol=path2;
                                }
                            }
                        }
                        $("#loadingDiv").parent().remove();
                        mychart.setOption(line_direction_option);

                    }
                    else{
                        mychart.setOption(line_direction_option);
                        layer.alert('找不到策略,请检查数据输入是否正常', {

                            icon: 5,

                            title: "提示"

                        });return false;
                    }

                }
            })
        },
    })
}

var line_direction_option={
    title: {  //标题
        // text: '夏季能源知识图谱',
        left: '-5',
        top: '10px',
        textStyle: {
            color: '#ffffff',
            fontFamily: '微软雅黑',
            fontWeight: 'lighter',
            fontSize: 18
        },
    },
    // 提示框的配置
    tooltip: {
        trigger: 'item',
        formatter:"名称:{b0}" +"<br>"+
        "坐标值:"+"["+"{c0}"+"]",
    },

    xAxis: {  //X轴的设置
        type: 'value',
        boundaryGap: false,
        show: false
    },
    yAxis: { //Y轴的设置
        type: 'value',
        show: false
    },
    series: [{   //节点
        type: 'graph',
        layout: 'none',
        // silent: true,          //不响应鼠标事件
        coordinateSystem: 'cartesian2d',
        symbolSize: 20,
        showEffectOn: 'render',
        zlevel: 2,
        rippleEffect: {
            period: 3, //波纹秒数
            brushType: 'fill', //stroke(涟漪)和fill(扩散)，两种效果
            scale: 10 //波纹范围
        },
        hoverAnimation: true,

        label: {
            normal: {
                show: true,
                position: 'bottom',//设置label显示的位置
                // formatter: '{c}',//设置label读取的值为value
                textStyle: {
                    fontSize: '18'
                },
            }
        },
        data:[]
    },

        {
            type: 'lines',
            symbol: ['none', 'arrow'],
            symbolSize: 10,
            coordinateSystem: 'cartesian2d',
            label: {
                show: true,
                position: 'middle',
                fontSize: 18,
                color: '#fff',
            },
            lineStyle: {
                normal: {
                    // color: '#fff',
                    color: '#fff',

                    width: 3,
                    opacity: 0.5,
                    curveness: 0,

                }
            },
            effect: {
                show: true,
                // smooth: false,
                trailLength: 0,
                symbol: "none", // ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’
                // color: '#507577',
                symbolSize: 50,
                // symbol:planePath,
                // symbol:'none'
            },
            data: [],
        }
    ],

}